<template>
  <div class="security-alert">
    <div class="page-header">
      <h2>安全预警设置</h2>
      <p>配置您的安全预警规则和通知方式</p>
    </div>

    <!-- 预警状态概览 -->
    <div class="alert-overview">
      <div class="status-card">
        <div class="status-indicator active"></div>
        <div class="status-info">
          <h3>预警系统状态</h3>
          <p>系统正常运行</p>
        </div>
        <div class="status-actions">
          <button class="btn btn-secondary" @click="toggleAlertSystem">
            {{ alertSystem.enabled ? '暂停监控' : '启用监控' }}
          </button>
        </div>
      </div>
      
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">{{ alertStats.totalAlerts }}</div>
          <div class="stat-label">本月预警</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ alertStats.highRiskAlerts }}</div>
          <div class="stat-label">高风险预警</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ alertStats.responseTime }}ms</div>
          <div class="stat-label">平均响应时间</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ alertStats.accuracy }}%</div>
          <div class="stat-label">预警准确率</div>
        </div>
      </div>
    </div>

    <!-- 预警规则设置 -->
    <div class="settings-section">
      <div class="section-header">
        <h3>预警规则设置</h3>
        <button class="btn btn-primary" @click="addCustomRule">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 5v14"/>
            <path d="M5 12h14"/>
          </svg>
          添加自定义规则
        </button>
      </div>

      <div class="rules-container">
        <!-- 内置规则 -->
        <div class="rule-category">
          <h4>内置规则</h4>
          <div class="rule-list">
            <div class="rule-item" v-for="rule in builtInRules" :key="rule.id">
              <div class="rule-info">
                <div class="rule-name">{{ rule.name }}</div>
                <div class="rule-description">{{ rule.description }}</div>
                <div class="rule-meta">
                  <span class="rule-type">{{ rule.type }}</span>
                  <span class="rule-level" :class="rule.level">{{ getRiskLevelLabel(rule.level) }}</span>
                </div>
              </div>
              <div class="rule-controls">
                <label class="switch">
                  <input type="checkbox" v-model="rule.enabled" @change="updateRule(rule)" />
                  <span class="slider"></span>
                </label>
                <button class="btn btn-text" @click="configureRule(rule)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 15l-2-2 2-2"/>
                    <path d="M16 11l-2 2 2 2"/>
                  </svg>
                  配置
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 自定义规则 -->
        <div class="rule-category">
          <h4>自定义规则</h4>
          <div class="rule-list">
            <div class="rule-item" v-for="rule in customRules" :key="rule.id">
              <div class="rule-info">
                <div class="rule-name">{{ rule.name }}</div>
                <div class="rule-description">{{ rule.description }}</div>
                <div class="rule-meta">
                  <span class="rule-type">{{ rule.type }}</span>
                  <span class="rule-level" :class="rule.level">{{ getRiskLevelLabel(rule.level) }}</span>
                </div>
              </div>
              <div class="rule-controls">
                <label class="switch">
                  <input type="checkbox" v-model="rule.enabled" @change="updateRule(rule)" />
                  <span class="slider"></span>
                </label>
                <button class="btn btn-text" @click="editRule(rule)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                  </svg>
                  编辑
                </button>
                <button class="btn btn-text" @click="deleteRule(rule)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 6h18"/>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                  </svg>
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知方式配置 -->
    <div class="settings-section">
      <div class="section-header">
        <h3>通知方式配置</h3>
      </div>

      <div class="notification-settings">
        <div class="notification-item">
          <div class="notification-info">
            <h4>邮件通知</h4>
            <p>通过邮件接收安全预警通知</p>
          </div>
          <div class="notification-controls">
            <label class="switch">
              <input type="checkbox" v-model="notificationSettings.email.enabled" @change="updateNotificationSettings" />
              <span class="slider"></span>
            </label>
            <button class="btn btn-text" @click="configureEmailNotification">配置</button>
          </div>
        </div>

        <div class="notification-item">
          <div class="notification-info">
            <h4>短信通知</h4>
            <p>通过短信接收紧急安全预警</p>
          </div>
          <div class="notification-controls">
            <label class="switch">
              <input type="checkbox" v-model="notificationSettings.sms.enabled" @change="updateNotificationSettings" />
              <span class="slider"></span>
            </label>
            <button class="btn btn-text" @click="configureSmsNotification">配置</button>
          </div>
        </div>

        <div class="notification-item">
          <div class="notification-info">
            <h4>应用推送</h4>
            <p>通过应用内推送接收实时预警</p>
          </div>
          <div class="notification-controls">
            <label class="switch">
              <input type="checkbox" v-model="notificationSettings.push.enabled" @change="updateNotificationSettings" />
              <span class="slider"></span>
            </label>
            <button class="btn btn-text" @click="configurePushNotification">配置</button>
          </div>
        </div>

        <div class="notification-item">
          <div class="notification-info">
            <h4>微信通知</h4>
            <p>通过微信接收安全预警消息</p>
          </div>
          <div class="notification-controls">
            <label class="switch">
              <input type="checkbox" v-model="notificationSettings.wechat.enabled" @change="updateNotificationSettings" />
              <span class="slider"></span>
            </label>
            <button class="btn btn-text" @click="configureWechatNotification">配置</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 敏感词管理 -->
    <div class="settings-section">
      <div class="section-header">
        <h3>敏感词管理</h3>
        <button class="btn btn-secondary" @click="importSensitiveWords">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="17,8 12,3 7,8"/>
            <line x1="12" y1="3" x2="12" y2="15"/>
          </svg>
          导入词库
        </button>
      </div>

      <div class="sensitive-words-container">
        <div class="word-input-area">
          <div class="input-group">
            <input 
              type="text" 
              v-model="newWord" 
              placeholder="添加敏感词或短语..."
              @keyup.enter="addSensitiveWord"
            />
            <select v-model="newWordCategory">
              <option value="fraud">诈骗</option>
              <option value="spam">垃圾信息</option>
              <option value="phishing">钓鱼</option>
              <option value="malware">恶意软件</option>
              <option value="custom">自定义</option>
            </select>
            <button class="btn btn-primary" @click="addSensitiveWord">添加</button>
          </div>
        </div>

        <div class="word-categories">
          <div class="category-tabs">
            <button 
              v-for="category in wordCategories" 
              :key="category.key"
              class="tab-btn"
              :class="{ active: selectedCategory === category.key }"
              @click="selectedCategory = category.key"
            >
              {{ category.label }} ({{ getSensitiveWordsByCategory(category.key).length }})
            </button>
          </div>

          <div class="word-list">
            <div class="word-item" v-for="word in displayedWords" :key="word.id">
              <div class="word-content">
                <span class="word-text">{{ word.text }}</span>
                <span class="word-category">{{ getCategoryLabel(word.category) }}</span>
              </div>
              <div class="word-actions">
                <button class="btn btn-link" @click="editWord(word)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                  </svg>
                </button>
                <button class="btn btn-link" @click="deleteWord(word)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 6h18"/>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 预警日志 -->
    <div class="settings-section">
      <div class="section-header">
        <h3>预警日志</h3>
        <button class="btn btn-secondary" @click="exportLogs">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="7,10 12,15 17,10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
          </svg>
          导出日志
        </button>
      </div>

      <div class="log-container">
        <div class="log-item" v-for="log in recentLogs" :key="log.id">
          <div class="log-time">{{ formatTime(log.timestamp) }}</div>
          <div class="log-content">
            <div class="log-message">{{ log.message }}</div>
            <div class="log-meta">
              <span class="log-rule">规则：{{ log.rule }}</span>
              <span class="log-level" :class="log.level">{{ getRiskLevelLabel(log.level) }}</span>
            </div>
          </div>
          <div class="log-actions">
            <button class="btn btn-link" @click="viewLogDetail(log)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 预警系统状态
const alertSystem = reactive({
  enabled: true,
  lastUpdate: '2024-01-20 15:30:00'
})

// 预警统计
const alertStats = ref({
  totalAlerts: 45,
  highRiskAlerts: 12,
  responseTime: 150,
  accuracy: 96.5
})

// 内置规则
const builtInRules = ref([
  {
    id: 1,
    name: '诈骗关键词检测',
    description: '检测包含诈骗关键词的文本内容',
    type: '文本分析',
    level: 'high',
    enabled: true
  },
  {
    id: 2,
    name: '可疑链接检测',
    description: '识别可疑的网络链接和钓鱼网站',
    type: '链接分析',
    level: 'critical',
    enabled: true
  },
  {
    id: 3,
    name: '异常电话号码',
    description: '识别已知的诈骗电话号码',
    type: '电话分析',
    level: 'medium',
    enabled: true
  },
  {
    id: 4,
    name: '深度伪造检测',
    description: '检测AI生成的虚假视频内容',
    type: '视频分析',
    level: 'high',
    enabled: false
  }
])

// 自定义规则
const customRules = ref([
  {
    id: 101,
    name: '特殊关键词监控',
    description: '监控特定关键词的出现频率',
    type: '自定义',
    level: 'medium',
    enabled: true
  }
])

// 通知设置
const notificationSettings = reactive({
  email: {
    enabled: true,
    address: 'user@example.com',
    frequency: 'immediate'
  },
  sms: {
    enabled: true,
    phone: '13800138000',
    frequency: 'high_risk_only'
  },
  push: {
    enabled: true,
    frequency: 'immediate'
  },
  wechat: {
    enabled: false,
    frequency: 'daily_summary'
  }
})

// 敏感词管理
const newWord = ref('')
const newWordCategory = ref('fraud')
const selectedCategory = ref('all')

const wordCategories = [
  { key: 'all', label: '全部' },
  { key: 'fraud', label: '诈骗' },
  { key: 'spam', label: '垃圾信息' },
  { key: 'phishing', label: '钓鱼' },
  { key: 'malware', label: '恶意软件' },
  { key: 'custom', label: '自定义' }
]

const sensitiveWords = ref([
  { id: 1, text: '免费领取', category: 'fraud' },
  { id: 2, text: '点击链接', category: 'phishing' },
  { id: 3, text: '中奖通知', category: 'spam' },
  { id: 4, text: '紧急处理', category: 'fraud' },
  { id: 5, text: '验证码', category: 'fraud' }
])

// 预警日志
const recentLogs = ref([
  {
    id: 1,
    timestamp: '2024-01-20 15:30:15',
    message: '检测到可疑诈骗信息',
    rule: '诈骗关键词检测',
    level: 'high'
  },
  {
    id: 2,
    timestamp: '2024-01-20 14:45:22',
    message: '发现钓鱼网站链接',
    rule: '可疑链接检测',
    level: 'critical'
  },
  {
    id: 3,
    timestamp: '2024-01-20 13:20:10',
    message: '异常电话号码呼入',
    rule: '异常电话号码',
    level: 'medium'
  }
])

// 显示的敏感词
const displayedWords = computed(() => {
  if (selectedCategory.value === 'all') {
    return sensitiveWords.value
  }
  return sensitiveWords.value.filter(word => word.category === selectedCategory.value)
})

// 按分类获取敏感词
const getSensitiveWordsByCategory = (category) => {
  if (category === 'all') {
    return sensitiveWords.value
  }
  return sensitiveWords.value.filter(word => word.category === category)
}

// 切换预警系统
const toggleAlertSystem = () => {
  alertSystem.enabled = !alertSystem.enabled
  console.log('预警系统状态:', alertSystem.enabled)
}

// 添加自定义规则
const addCustomRule = () => {
  console.log('添加自定义规则')
  // 这里应该打开添加规则的对话框
}

// 更新规则
const updateRule = (rule) => {
  console.log('更新规则:', rule)
  // 这里应该调用API更新规则状态
}

// 配置规则
const configureRule = (rule) => {
  console.log('配置规则:', rule)
  // 这里应该打开规则配置对话框
}

// 编辑规则
const editRule = (rule) => {
  console.log('编辑规则:', rule)
  // 这里应该打开编辑规则的对话框
}

// 删除规则
const deleteRule = (rule) => {
  if (confirm('确定要删除这条规则吗？')) {
    customRules.value = customRules.value.filter(r => r.id !== rule.id)
  }
}

// 更新通知设置
const updateNotificationSettings = () => {
  console.log('更新通知设置:', notificationSettings)
  // 这里应该调用API保存通知设置
}

// 配置邮件通知
const configureEmailNotification = () => {
  console.log('配置邮件通知')
  // 这里应该打开邮件配置对话框
}

// 配置短信通知
const configureSmsNotification = () => {
  console.log('配置短信通知')
  // 这里应该打开短信配置对话框
}

// 配置推送通知
const configurePushNotification = () => {
  console.log('配置推送通知')
  // 这里应该打开推送配置对话框
}

// 配置微信通知
const configureWechatNotification = () => {
  console.log('配置微信通知')
  // 这里应该打开微信配置对话框
}

// 添加敏感词
const addSensitiveWord = () => {
  if (!newWord.value.trim()) return
  
  const word = {
    id: Date.now(),
    text: newWord.value.trim(),
    category: newWordCategory.value
  }
  
  sensitiveWords.value.push(word)
  newWord.value = ''
  console.log('添加敏感词:', word)
}

// 导入敏感词
const importSensitiveWords = () => {
  console.log('导入敏感词')
  // 这里应该打开文件选择对话框
}

// 编辑敏感词
const editWord = (word) => {
  console.log('编辑敏感词:', word)
  // 这里应该打开编辑对话框
}

// 删除敏感词
const deleteWord = (word) => {
  if (confirm('确定要删除这个敏感词吗？')) {
    sensitiveWords.value = sensitiveWords.value.filter(w => w.id !== word.id)
  }
}

// 导出日志
const exportLogs = () => {
  console.log('导出日志')
  // 这里应该实现日志导出功能
}

// 查看日志详情
const viewLogDetail = (log) => {
  console.log('查看日志详情:', log)
  // 这里应该打开日志详情对话框
}

// 获取风险等级标签
const getRiskLevelLabel = (level) => {
  const labels = {
    low: '低风险',
    medium: '中风险',
    high: '高风险',
    critical: '极高风险'
  }
  return labels[level] || level
}

// 获取分类标签
const getCategoryLabel = (category) => {
  const labels = {
    fraud: '诈骗',
    spam: '垃圾信息',
    phishing: '钓鱼',
    malware: '恶意软件',
    custom: '自定义'
  }
  return labels[category] || category
}

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.security-alert {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 预警状态概览 */
.alert-overview {
  margin-bottom: 32px;
}

.status-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.status-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4caf50;
  animation: pulse 2s infinite;
}

.status-indicator.active {
  background: #4caf50;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-info {
  flex: 1;
}

.status-info h3 {
  margin: 0 0 4px 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.status-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1e3c72;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* 设置区域 */
.settings-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f5f5f5;
}

.section-header h3 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-text {
  background: transparent;
  color: #1e3c72;
  padding: 4px 8px;
}

.btn-link {
  background: transparent;
  color: #1e3c72;
  padding: 4px;
}

.btn:hover {
  opacity: 0.9;
}

/* 规则管理 */
.rules-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.rule-category h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.rule-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.rule-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.rule-meta {
  display: flex;
  gap: 12px;
}

.rule-type {
  padding: 2px 8px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
  font-size: 12px;
}

.rule-level {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.rule-level.low {
  background: #e8f5e8;
  color: #388e3c;
}

.rule-level.medium {
  background: #fff3e0;
  color: #f57c00;
}

.rule-level.high {
  background: #ffebee;
  color: #d32f2f;
}

.rule-level.critical {
  background: #f3e5f5;
  color: #7b1fa2;
}

.rule-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #1e3c72;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* 通知设置 */
.notification-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.notification-info h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.notification-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.notification-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 敏感词管理 */
.sensitive-words-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.word-input-area {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.input-group {
  display: flex;
  gap: 12px;
}

.input-group input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e9e9e9;
  border-radius: 6px;
  font-size: 14px;
}

.input-group select {
  padding: 12px;
  border: 2px solid #e9e9e9;
  border-radius: 6px;
  font-size: 14px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 8px 16px;
  border: 2px solid #e9e9e9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab-btn.active {
  border-color: #1e3c72;
  background: #1e3c72;
  color: white;
}

.word-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.word-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.word-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.word-category {
  font-size: 12px;
  color: #666;
  margin-left: 12px;
}

.word-actions {
  display: flex;
  gap: 8px;
}

/* 日志样式 */
.log-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.log-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.log-time {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  min-width: 120px;
}

.log-content {
  flex: 1;
}

.log-message {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.log-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.log-level {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.log-level.low {
  background: #e8f5e8;
  color: #388e3c;
}

.log-level.medium {
  background: #fff3e0;
  color: #f57c00;
}

.log-level.high {
  background: #ffebee;
  color: #d32f2f;
}

.log-level.critical {
  background: #f3e5f5;
  color: #7b1fa2;
}

.log-actions {
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .security-alert {
    padding: 16px;
  }
  
  .status-card {
    flex-direction: column;
    text-align: center;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .rule-item,
  .notification-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .category-tabs {
    flex-wrap: wrap;
  }
  
  .log-item {
    flex-direction: column;
  }
}
</style> 